<template>

  <div>

    <el-row :gutter="20">
      <el-col :span="6">

        <el-card style="max-height: 800px; height: 800px">
          <el-row>
            <el-col :span="3">
              <p style="font-size: 14px;line-height: 5px">搜索</p>
            </el-col>
            <el-col :span="21">
              <el-input
                placeholder="输入关键字进行过滤"
                :size="tree.size"
                v-model="tree.filterText">
              </el-input>
            </el-col>
          </el-row>

          <br/>

          <!-- 节点树-->
          <!--
            indent 是防止树之间的间隔太大，这里要加样式才需要这个
            accordion 同一个节点，一次只能打开一个，防止树太大
                      :props="defaultProps" 指定数据从哪里获取，如果用了插槽就不需要了

          -->
          <!--左边的树结构-->
          <el-tree
            class="tree flow-tree errMdList" :indent='0'
            :data="tree.userTree"
            default-expand-all
            node-key="id"
            accordion
            :filter-node-method="filterNode"
            :highlight-current="tree.highlightSelect"
            :check-on-click-node="tree.checkClick"
            :expand-on-click-node="tree.expandClickNode"
            ref="tree"
            @node-click="handleNodeClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
            <!--<span>{{ data.userName}} <span v-if="data.call">({{data.call}})</span></span>-->
              <span v-if="data.userName === 'UNKNOWN_NAME_DEFAULT'" style="color: darkorange">未知姓名</span>
              <span v-else>{{data.userName}}</span>
              <span v-if="data.call">({{data.call}})</span>
            <!--<span>-->
            <!--  <el-button-->
            <!--    type="text"-->
            <!--    :size="tree.size"-->
            <!--    @click="() => detailedUser(data)">-->
            <!--    编辑-->
            <!--  </el-button>-->
            <!--</span>-->
          </span>
          </el-tree>

        </el-card>


      </el-col>


      <el-col :span="18">
        <!--右边的内容-->

        <!--<el-row>
          <el-col :span="24">
            &lt;!&ndash;查询界面&ndash;&gt;
            <el-card>

              <el-form inline label-width="90px" size="mini" class="demo-form-inline">

                <el-form-item label="真实姓名">
                  <el-input placeholder="请输入真实姓名" v-model.trim="queryParam.userName" clearable size="mini"></el-input>
                </el-form-item>

                <el-form-item label="外号|昵称">
                  <el-input placeholder="请输入外号|昵称" v-model.trim="queryParam.nickname" clearable size="mini"></el-input>
                </el-form-item>

                <el-form-item label="身份证">
                  <el-input placeholder="请输入身份证" v-model.trim="queryParam.idCard" clearable size="mini"></el-input>
                </el-form-item>

                <el-form-item label="手机号码">
                  <el-input placeholder="请输入手机号码" v-model.trim="queryParam.phone" clearable size="mini"></el-input>
                </el-form-item>

                <el-form-item label="生日提醒">
                  <el-select v-model="queryParam.birthdayTips" placeholder="请选择是否开启生日提醒" clearable>
                    <el-option label="开启" :value="2"></el-option>
                    <el-option label="未开启" :value="1"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" size="mini" @click="">查询</el-button>
                  <el-button type="warning" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>

              </el-form>

            </el-card>

          </el-col>
        </el-row>-->

        <el-row >
          <el-col :span="24">
            <!--本级用户内容信息-->
            <el-card>

              <el-row>
                <el-col :span="4">
                  <!--用户头像-->
                  <div class="userIcoImageDiv">
                    <el-image v-if="selectUser.icoPath != null" class="userIcoImage" fit="contain" :src="selectUser.icoPath"></el-image>
                    <el-image v-else class="userIcoImage" fit="contain" :src="require('@/assets/images/avatar/avatar11.png')"></el-image>
                  </div>

                </el-col>
                <el-col :span="20">
                  <!--用户信息-->
                  <el-descriptions
                    :contentStyle="CS" :label-style="LS"
                                   title="用户基础信息"
                                   :column="descriptions.column"
                                   :size="descriptions.size" border>
                    <template slot="extra">
                      <el-button type="primary" v-if="showUpdUser()" :size="tree.size" @click="returnToPreviousLevel">返回上一级</el-button>
                      <el-button type="success" :size="tree.size" @click="detailsSocialConnectionsPro">详情</el-button>
                      <el-button type="warning" :size="tree.size" @click="addSocialConnectionsPro">新增关系</el-button>
                      <el-button type="primary" v-if="showUpdUser()" :size="tree.size" @click="updSocialConnectionsPro">编辑</el-button>
                      <el-button type="warning" :size="tree.size" @click="openPictureBefore">添加图片</el-button>
                      <el-button type="danger" v-if="showUpdUser()" :size="tree.size" @click="delSocialConnectionsPro">删除</el-button>
                      <el-button type="warning" v-if="showUpdUser()" :size="tree.size" @click="openMigrate">迁移</el-button>
                    </template>

                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-user"></i>
                        真实姓名
                      </template>
                      <!--<span>{{selectUser.userName}}</span> <span v-if="selectUser.nickname">({{selectUser.nickname}})</span>-->
                      <span v-if="selectUser.userName === 'UNKNOWN_NAME_DEFAULT'" style="color: darkorange">未知姓名</span>
                      <span v-else>{{selectUser.userName}}</span>
                      <span v-if="selectUser.nickname">({{selectUser.nickname}})</span>
                    </el-descriptions-item>

                    <el-descriptions-item >
                      <template slot="label">
                        <i class="el-icon-bank-card"></i>
                        身份证
                      </template>
                      {{selectUser.idCard}}
                    </el-descriptions-item>

                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-time"></i>
                        真实出生年月
                      </template>
                      {{selectUser.birth}}
                    </el-descriptions-item>

                    <el-descriptions-item >
                      <template slot="label">
                        <i class="el-icon-alarm-clock"></i>
                        生日提醒时间
                      </template>
                      {{selectUser.birthdayTime}}
                    </el-descriptions-item>

                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-chat-dot-round"></i>
                        我对他的称呼
                      </template>
                      {{selectUser.call}}
                    </el-descriptions-item>

                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号
                      </template>
                      {{selectUser.phone}}
                    </el-descriptions-item>


                  </el-descriptions>

                </el-col>
              </el-row>

            </el-card>

          </el-col>
        </el-row>

        <el-row style="margin-top: 10px">
          <el-col :span="24">
            <!--本级用户的子用户信息-->
            <el-card>
              <!--<div slot="header" >-->
              <!--  <span>用户子关系信息</span>-->
              <!--  <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
              <!--</div>-->

              <el-table
                :data="socialConnectionTable.data"
                max-height="540px"
                height="540px"
                style="width: 100%">

                <el-table-column width="100">
                  <template slot-scope="scope">
                    <!--用户头像-->
                    <div class="userIcoImageDiv">
                      <!--<el-avatar v-if="scope.row.icoPath != null" shape="square" :size="socialConnectionTable.icoSize" :src="scope.row.icoPath"></el-avatar>-->
                      <!--<el-avatar v-else shape="square" :size="socialConnectionTable.icoSize" :src="require('@/assets/images/avatar/avatar11.png')"></el-avatar>-->
                      <el-image v-if="scope.row.icoPath != null"
                                fit="contain"
                                class="userIcoImage2"
                                :src="scope.row.icoPath"></el-image>
                      <el-image v-else
                                fit="contain"
                                class="userIcoImage2"
                                :src="require('@/assets/images/avatar/avatar11.png')"></el-image>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="userName"
                  label="真实姓名"
                >
                  <template slot-scope="scope">
                    <!--<span>{{scope.row.userName}} <span v-if="scope.row.nickname">({{scope.row.nickname}})</span></span>-->
                    <span v-if="scope.row.userName === 'UNKNOWN_NAME_DEFAULT'" style="color: darkorange">未知姓名</span>
                    <span v-else>{{scope.row.userName}}</span>
                    <span v-if="scope.row.nickname">({{scope.row.nickname}})</span>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="birthdayTime"
                  label="实际生日时间"
                >
                  <template slot-scope="scope">
                    <el-tag type="success" size="mini" v-if="scope.row.birthdayTime">{{scope.row.birthdayTime}}</el-tag>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="birthdayTips"
                  label="生日提醒"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.birthdayTips === 2"> 开启 </span>
                    <span v-else>未开启</span>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="beforeBirthday"
                  label="提前多久提醒"
                >
                </el-table-column>

                <el-table-column
                  prop="connectionTypeName"
                  label="连接类型"
                >

                </el-table-column>

                <el-table-column
                  prop="dataExplain"
                  label="关系说明"
                >
                </el-table-column>

                <el-table-column
                  prop="familyRanking"
                  label="排行"
                >
                </el-table-column>

                <el-table-column
                  prop="remarks"
                  label="备注"
                >
                </el-table-column>

                <el-table-column
                  prop="call"
                  label="我对他的称呼"
                >
                  <template slot-scope="scope">
                    <el-tag type="warning" size="mini" v-if="scope.row.call">{{scope.row.call}}</el-tag>
                  </template>
                </el-table-column>



                <el-table-column
                  fixed="right"
                  label="操作"
                  width="180">
                  <template slot-scope="scope">
                    <!--<el-button @click="toOpenMusicDetailed(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>-->
                    <el-button type="text" size="small" @click="getSubordinateJoin(scope.row)"><i class="el-icon-bottom"></i>社交</el-button>
                    <!--暂时不在这里添加-->
                    <!--<el-button type="text" size="small" @click="addSonConnectionsPro(scope.row)"><i class="el-icon-plus"></i>新增</el-button>-->
                    <el-button type="text" size="small" @click="getSubordinateDetail(scope.row)"><i class="el-icon-view"></i>详情</el-button>
                    <!--编辑有点麻烦，需要先获取父级数据，但这里又没的，先不做这一块的业务-->
                    <!--<el-button type="text" size="small" @click="updSonConnectionsPro(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>-->
                    <el-button type="text" size="small" @click="delSubordinate(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
                  </template>
                </el-table-column>

              </el-table>

            </el-card>
          </el-col>
        </el-row>

      </el-col>
    </el-row>


    <MemberFamilySaveUpd ref="memberFamilySaveUpdRef" @saveUpdMemberFamilyCallback="saveUpdMemberFamilyCallback"></MemberFamilySaveUpd>
    <MemberFamilyDetailed ref="memberFamilyDetailedRef" ></MemberFamilyDetailed>
    <MemberFamilyPicture ref="MemberFamilyPictureRef"/>
    <MigrateOpt ref="MigrateOptRef" @saveUpdMemberFamilyCallback="saveUpdMemberFamilyCallback"/>

  </div>

</template>

<script>

  import http from '@/utils/http'
  import MemberFamilySaveUpd from './MemberFamilySaveUpd.vue'
  import MemberFamilyDetailed from './MemberFamilyDetailed.vue'
  import MemberFamilyPicture from './MemberFamilyPicture.vue'
  import MigrateOpt from './MigrateOpt.vue'


  export default {
    // 社交关系
    name: "SocialConnectionList",
    components: {
      MemberFamilySaveUpd,
      MemberFamilyDetailed,
      MemberFamilyPicture,
      MigrateOpt,
    },
    data(){
      return {
        // 查询参数
        queryParam: {
          userName: null,
          nickname: null,
          idCard: null,
          phone: null,
          birthdayTips: null,
        },
        // 社交关系中的人员
        socialConnectionTable: {
          // 表格中的数据
          data: [],
          // 头像大小
          icoSize: 'large',
        },
        // 树里面的信息
        tree: {
          // 人员信息树
          userTree: [],
          // 搜索过滤树
          filterText: '',
          // 输入框大小
          size: 'mini',
          // 是否高亮选中
          highlightSelect: true,
          // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
          checkClick: false,
          // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
          expandClickNode: false,
          // 指定获取的数据结构，读取的key
          defaultProps: {
            children: 'children',
            label: 'userName',
          },
        },
        // 人员信息配置
        descriptions: {
          // 列表的尺寸
          size: 'small',
          // 一行 Descriptions Item 的数量
          column: 2,
        },
        // 当前选中的用户ID
        selectedUserId: null,
        // 当前选中的用户,查询出来的数据
        selectUser: {
          id: null,
          userName: null,
          nickname: null,
          phone: null,
          idCard: null,
          birth: null,
          birthdayTime: null,
          icoPath: null,
          // 父级数据
          parent: {

          },
          // 我对他的称呼
          call: '-',
          dataExplain: '-',
          sourceId: '-',
        },
        // 描述列表的css
        CS: {
          // 'text-align': 'center',  //文本居中
          'min-width': '250px',   //最小宽度
          'word-break': 'break-all'  //过长时自动换行
        },
        // 描述列表的css
        LS: {
          // 'color': '#000',
          // 'text-align': 'center',
          'font-weight': '600',
          // 'height': '40px',
          // 'background-color': 'rgba(255, 97, 2, 0.1)',
          'min-width': '110px',
          'word-break': 'keep-all'
        }
      }
    },
    watch: {
      /**
       * 监听值的变化- 树结构查询变化
       * @param val 发生变化的数据
       */
      'tree.filterText'(val) {
        this.$refs.tree.filter(val);
      },
      /**
       * 当前选中的用户ID
       */
      selectedUserId(){
        // 查询当前选中的用户数据
        this.getMemberFamilyByIdJoin()
        // 用户的子级数据
        this.getSocialConnectionAll()
      },
    },
    methods: {
      /**
       * 保存修改之后的回调函数
       */
      saveUpdMemberFamilyCallback(){
        this.getMemberFamilyTree()
        this.getMemberFamilyByIdJoin()
        this.getSocialConnectionAll()
      },
      /**
       * 查看详情前的操作
       */
      detailsSocialConnectionsPro(){
        this.$refs.memberFamilyDetailedRef.openMemberFamilyDetailed(this.selectUser)
      },
      /**
       * 打开图片弹窗之前
       */
      openPictureBefore(){
        this.$refs.MemberFamilyPictureRef.openMemberFamilyPicturePage(this.selectUser.id)
      },
      /**
       * 新增社交关系前的操作
       */
      addSocialConnectionsPro(){
        let user = this.getLocalStorageUser('save');
        this.$refs.memberFamilySaveUpdRef.openMemberFamilyPage('save', null, user)
      },
      /**
       * 编辑修改
       */
      updSocialConnectionsPro(){
        let user = this.getLocalStorageUser('upd')
        this.$refs.memberFamilySaveUpdRef.openMemberFamilyPage('upd', this.selectUser, user)
      },
      /**
       * 跳转到打开迁移页面，可以将数据迁移到其他页面
       */
      openMigrate(){
        this.$refs.MigrateOptRef.openMigrateOpt(this.selectUser)
      },
      /**
       * 删除用户
       */
      delSocialConnectionsPro(){
        let row = {
          id: this.selectUser.id,
          joinId: this.selectUser.joinId
        }
        this.delSubordinate(row)
      },
      /**
       * 是否显示编辑，如果是登录用户不显示编辑按钮
       * 主要是这里要控制这里不能进行添加家庭成员，所以这里编辑用户的时候就有问题了
       * 虽然可以解决，但也不符合之前的设计
       */
      showUpdUser(){
        let localStorage = window.localStorage;
        let memberFamily = JSON.parse(localStorage.memberFamily);
        if (memberFamily){
          if (memberFamily.id === this.selectUser.id){
            return false
          }
        }
        return true
      },
      /**
       * 获取存储的用户
       * @param type 是修改还是新增
       */
      getLocalStorageUser(type){
        // 如果用户是自己，那么新增下级的时候只能添加社交关系，其他的，则将家庭关系和社交关系都在这里添加
        let localStorage = window.localStorage;
        let memberFamily = JSON.parse(localStorage.memberFamily);
        let connectionType = 3
        if (memberFamily){
          if (memberFamily.id === this.selectedUserId){
            // 只可以选择家庭成员类型，防止滥用家庭成员添加
            connectionType = 2
          }
        }
        console.log(this.selectUser )
        if (type === 'save'){
          return  {
            // 当前用户ID
            id: this.selectUser.id,
            // 真实姓名
            userName: this.selectUser.userName,
            // 外号，昵称
            nickname: this.selectUser.nickname,
            // 我对他的称呼
            call: this.selectUser.call,
            // 当前登陆用户
            currentLoginUserName: memberFamily.userName,
            // 获取连接类型的使用哪一种，现在有三种，1，只获取家庭成员2，获取社交关系，3，1+2全部获取
            connectionType: connectionType,
          }
        } else {
          return  {
            // 当前用户ID
            id: this.selectUser.id,
            // 真实姓名
            userName: this.selectUser.parent.userName,
            // 外号，昵称
            nickname: this.selectUser.parent.call,
            // 我对他的称呼
            call: this.selectUser.call,
            // 当前登陆用户
            currentLoginUserName: memberFamily.userName,
            // 获取连接类型的使用哪一种，现在有三种，1，只获取家庭成员2，获取社交关系，3，1+2全部获取
            connectionType: connectionType,
          }
        }

      },
      /**
       * 进入到下级关系中
       * @param row 当前行数据
       */
      getSubordinateJoin(row){
        this.selectedUserId = row.id
      },
      /**
       * 详情弹出，获取子节点的详情信息
       * @param row 当前行数据
       */
      getSubordinateDetail(row){
        this.$refs.memberFamilyDetailedRef.openMemberFamilyDetailed(row)
      },
      /**
       * 子级关系修改编辑
       * @param row 当前行数据
       */
      updSonConnectionsPro(row){
        // let localStorage = window.localStorage;
        // let memberFamily = JSON.parse(localStorage.memberFamily);
        //  这里获取的数据有问题， 要获取的是父级的数据，故而这里有bug
        // let user = {
        //   // 当前用户ID
        //   id: row.id,
        //   // 真实姓名
        //   userName: row.userName,
        //   // 外号，昵称
        //   nickname: row.nickname,
        //   // 我对他的称呼
        //   call: row.call,
        //   // 当前登陆用户
        //   currentLoginUserName: memberFamily.userName,
        //   // 获取连接类型的使用哪一种，现在有三种，1，只获取家庭成员2，获取社交关系，3，1+2全部获取
        //   // 这里可以确定是子级添加，所以固定3模式
        //   connectionType: 3,
        // }
        // this.$refs.memberFamilySaveUpdRef.openMemberFamilyPage('upd', row, user)
      },
      /**
       * 删除子级关系
       * @param row 当前行数据
       */
      delSubordinate(row){
        this.$confirm('是否删除数据，删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delMemberFamilyById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 根据成员主键删除成员信息
       */
      delMemberFamilyById(row){
        http.post("/user/delMemberFamilyById", {
          id: row.id,
          joinId: row.joinId,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getMemberFamilyTree()
          this.getSocialConnectionAll()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化调用
       */
      initCall(){
        this.getMemberFamilyTree()
        this.getSocialCurrentUser()
      },
      /**
       * 子关系用户添加时候操作
       * @param row 当前行数据
       */
      addSonConnectionsPro(row){
        let localStorage = window.localStorage;
        let memberFamily = JSON.parse(localStorage.memberFamily);

        let user = {
          // 当前用户ID
          id: row.id,
          // 真实姓名
          userName: row.userName,
          // 外号，昵称
          nickname: row.nickname,
          // 我对他的称呼
          call: row.call,
          // 当前登陆用户
          currentLoginUserName: memberFamily.userName,
          // 获取连接类型的使用哪一种，现在有三种，1，只获取家庭成员2，获取社交关系，3，1+2全部获取
          // 这里可以确定是子级添加，所以固定3模式
          connectionType: 3,
        }
        this.$refs.memberFamilySaveUpdRef.openMemberFamilyPage('save', null, user)
      },
      /**
       * 返回到上一层
       */
      returnToPreviousLevel(){
        this.selectedUserId = this.selectUser.sourceId
      },
      /**
       * 查看详情
       * @param data 点击的数据
       */
      detailedUser(data){
        console.log(data)
      },
      /**
       * 节点被点击
       * @param data 当前数据
       */
      handleNodeClick(data){
        this.selectedUserId = data.id
      },
      /**
       * 过滤查询树
       * @param value 要过滤的值，查询的数据
       * @param data 当前节点数据
       * @param node 节点信息
       * @return {boolean}  返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
       */
      filterNode(value, data, node) {
        if (!value) return true;
        return data.userName.indexOf(value) !== -1 ;
      },
      /**
       * 获取当前用户树
       */
      getMemberFamilyTree(){
        http.get("/user/getMemberFamilyTree", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.tree.userTree = res.data;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 根据主键查询用户ID
       */
      getMemberFamilyByIdJoin(){
        http.post("/user/getMemberFamilyByIdJoin", {
          id: this.selectedUserId
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.selectUser = res.data;
          console.log("!11")
          console.log(this.selectUser)

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 重置查询
       */
      resetQuery(){
        this.queryParam = {
          userName: null,
          nickname: null,
          idCard: null,
          phone: null,
          birthdayTips: null,
        }
      },
      /**
       * 获取当前用户或从路由中获取登录用户
       */
      getSocialCurrentUser(){
        this.$store.commit('navigationListChange', ['社交管理', '社交关系'])

        // 从路由中获取参数，有参数则使用路由中的，否则使用登录用户
        let userId = this.$route.query.userId;
        if (userId){
          this.selectedUserId = userId

        } else {
          let localStorage = window.localStorage;
          let memberFamily = JSON.parse(localStorage.memberFamily);
          if (memberFamily){
            // 修改为当前登录用户，通过监听解决获取问题
            this.selectedUserId = memberFamily.id
          }
        }
      },
      /**
       * 查询用户的社交关系，家人和其他的人员都会查询出来
       */
      getSocialConnectionAll(){
        http.post("/user/getSocialConnectionAll", {
          id: this.selectedUserId
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.socialConnectionTable.data = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.initCall()
    },
  }
</script>

<style scoped>

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  /* 给树加虚线 == start */
  .tree-container {
    overflow: hidden;
  }
  .tree /deep/ .el-tree-node {
    position: relative;
    padding-left: 0 ;
  }
  .tree /deep/ .el-tree-node__children {
    padding-left: 16px;
  }
  .tree /deep/ .el-tree-node :last-child:before {
    height: 12px;
  }
  .tree /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
  }
  .tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .tree /deep/ .el-tree-node:before {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: 0px;
    width: 1px;
  }
  .tree /deep/ .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
    border-top: 1px dashed #4386c6;
    height: 20px;
    top:12px;
    width: 10px ;
  }
  /* 给树加虚线 == end */

  /*树加滚动条*/
  /deep/.el-tree {
    width: 100%;
    height: 720px;
    max-height: 720px;
    overflow: scroll;
  }
  /deep/.el-tree>.el-tree-node {
    display: inline-block;
    min-width: 100%;
  }

  /*滚动条美化*/
  .errMdList{
    /*width: 50%;*/
    /*max-height: 61vh;*/
    overflow: auto;
    border: 1px solid #ddd;
  }
  .errMdList::-webkit-scrollbar {
    /*width: 8px;*/
  }
  .errMdList::-webkit-scrollbar-track {
    background-color:#fff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
  }
  .errMdList::-webkit-scrollbar-thumb {
    background-color:#c0dbfb;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
  }




  /*头像图片样式*/
  .userIcoImage {
    /*width: 102px;*/
    /*height: 136px;*/
    width: 124px;
    height: 162px
  }

  .userIcoImage2 {
    width: 82px;
    height: 114px;
  }

  /*将图片进行居中处理*/
  .userIcoImageDiv {
    text-align:center;
    /*margin: auto;*/
  }

  /*.weChatSty {*/
  /*  width: 15px;*/
  /*  height: 15px;*/
  /*}*/

</style>


